@import "variables";

my-circle {
  .my-circle-wrap {
    width: 100%;
    padding: pxTorem(40) 0;
  }

  .circle-subhead {
    font-size: pxTorem(30);
    color: color($h5, c2);
    p {
      line-height: pxTorem(30);
      height: pxTorem(30);
    }
    i {
      display: inline-block;
      width: pxTorem(6);
      height: pxTorem(30);
      background: color($h5, c1);
    }
    span {
      margin-left: pxTorem(18);
    }
  }

  .my-circle {
    margin-bottom: pxTorem(50);
    &.my-circle:last-child {
      margin-bottom: 0;
    }
    .circle-info {
      padding: pxTorem(40) pxTorem(55) 0 pxTorem(30);
      height: auto;
      align-items: flex-start;
      position: relative;
      .icon-deit {
        display: block;
        position: absolute;
        top: pxTorem(40);
        right: pxTorem(30);
        @include icon(38, 40, '#{$icons-path}/circle_deit.png');
      }
      .info-text {
        .circle-intro {
          margin-top: pxTorem(20);
          line-height: pxTorem(45);
          white-space: normal;
          @include multi-line-exllipsis(2);
        }
      }
      .circle-name-wrap{
        max-width: 93% !important;
      }
    }

    .join-circle {
      margin-top: pxTorem(20);
      font-size: pxTorem(24);
      color: color($h5, c4);
      i {
        color: color($h5, c12);
      }
    }
    &.seed-underline::before {
      display: none;
    }

  }

  .join-circles {
    padding-top: pxTorem(40);
  }
  .join-my-circles {
    visibility: hidden;
    opacity: 0;
    z-index: 9;
    position: fixed;
    width: pxTorem(90px);
    height: pxTorem(90px);
    right: pxTorem(20px);
    bottom: pxTorem(130px);
    transition: all 1S ease-out 0s;
    &.show {
      visibility: visible;
      opacity: 1;
    }
  }
}


